<script setup>
import { onMounted } from 'vue';

const loadMeiqiaScript = () => {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://static.meiqia.com/widget/loader.js';
  script.async = true;
  script.onload = () => {
    initMeiqia();
  };
  document.head.appendChild(script);
};

const initMeiqia = () => {
  // JavaScript 中的 parse 函数
  function parse(query) {
    var qs = {};
    var i = query.indexOf('?');
    if (i < 0 && query.indexOf('=') < 0) {
      return qs;
    } else if (i >= 0) {
      query = query.substring(i + 1);
    }
    var parts = query.split('&');
    for (var n = 0; n < parts.length; n++) {
      var part = parts[n];
      var key = part.split('=')[0];
      var val = part.split('=')[1];
      key = key.toLowerCase();
      if (typeof qs[key] === 'undefined') {
        qs[key] = decodeURIComponent(val);
      } else if (typeof qs[key] === 'string') {
        var arr = [qs[key], decodeURIComponent(val)];
        qs[key] = arr;
      } else {
        qs[key].push(decodeURIComponent(val));
      }
    }
    return qs;
  }

  // 初始化 MeiQia 插件
  (function (m, ei, q, i, a, j, s) {
    m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments); };
    (j = ei.createElement(q)), (s = ei.getElementsByTagName(q)[0]);
    j.async = true;
    j.charset = 'UTF-8';
    j.src = 'https://static.meiqia.com/widget/loader.js';
    s.parentNode.insertBefore(j, s);
  })(window, document, 'script', '_MEIQIA');

  const data = parse(window.location.search);
  let entId = data.entid || data.eid;
  if (Object.prototype.toString.call(entId) === '[object Array]') {
    entId = +entId[0];
  } else {
    entId = +entId;
  }

  _MEIQIA('entId', 'ec007630e6c678f9232ac9e7669a8c2f' || entId);
  _MEIQIA('standalone', function (config) {
    if (config.color) {
      document.body.style['background-color'] = '#' + config.color;
    }
    if (config.url) {
      document.body.style['background-image'] = 'url(' + config.url + ')';
      document.body.style['background-repeat'] = 'no-repeat';
      document.body.style['background-size'] = '100% 100%';
    }
  });
  _MEIQIA('withoutBtn');
  if (data.metadata) {
    try {
      const metadata = JSON.parse(data.metadata);
      _MEIQIA('metadata', metadata);
    } catch (e) { }
  }
  if (data.encryptedmetadata) {
    _MEIQIA('encryptedmetadata', data.encryptedmetadata);
  }
  if (data.requestperms) {
    localStorage.setItem('requestperms', data.requestperms);
  }
  if (data.language) {
    if (data.languagelocal !== 'true') {
      _MEIQIA('language', data.language);
    }
  }
  if (data.languagelocal === 'true') {
    _MEIQIA('languageLocal', true);
  }
  if (data.subsource) {
    _MEIQIA('subSource', data.subsource);
  }
  if (data.fallback) {
    _MEIQIA('fallback', +data.fallback);
  }
  if (data.socketprotocol) {
    _MEIQIA('socketProtocol', data.socketprotocol);
  }
  _MEIQIA('handleParams', data);
  if (data.clientid) {
    _MEIQIA('clientId', data.clientid);
  }
  if (data.agentid || data.groupid) {
    _MEIQIA('assign', { agentToken: data.agentid || null, groupToken: data.groupid || null });
  }
  _MEIQIA('showPanel', {
    greeting: data.greeting || '',
    agentToken: data.agentid || null,
    groupToken: data.groupid || null
  });
};

onMounted(() => {
  loadMeiqiaScript();
});
</script>

<template>
  <div>
    <div id="meiqia-widget"></div>
  </div>
</template>

<style scoped lang="less">
#meiqia-widget {
  width: 100%;
  height: 100%;
}
</style>
